<template>
  <view class="content">
    <div :style="{ padding: '10px', backgroundColor: searchBk }" @click="goSreach">
      <u-search placeholder="输入关键字搜索" :inputAlign="'left'" :showAction="false" height="30"></u-search>
    </div>
    <scroll-view
      @refresherrefresh="onPulling"
      style="height: 85%"
      class="dialogue-box"
      :refresher-enabled="true"
      :refresher-triggered="triggered"
      :scroll-y="true"
      @scrolltolower="scrolltolower"
    >
      <view v-for="(item, index) in jsonPage" :key="index" class="page">
        <view v-if="item.type == 'atmosphere'">
          <Atmosphere :data="item.data"></Atmosphere>
        </view>
        <view v-if="item.type == 'banner'">
          <Banner :data="item.data"></Banner>
        </view>
        <view v-if="item.type == 'quickLink'">
          <QuickLink :data="item.data"></QuickLink>
        </view>
        <view v-if="item.type == 'focusAdvertising'">
          <FocusAdvertising :data="item.data"></FocusAdvertising>
        </view>
        <view v-if="item.type == 'product'">
          <Product :data="goodsListIndex" v-if="goodsListIndex" :showNoMore="goodsShowNoMore"></Product>
        </view>
        <!-- 图片 -->
        <view v-if="item.type == 'images'">
          <ImagesCom :data="item.data"></ImagesCom>
        </view>
        <!-- 文本 -->
        <view v-if="item.type == 'text'">
          <TextCom :data="item"></TextCom>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref, watch } from "vue";
import { getGoodsListIndex, getGoodsList } from "@/utils/api";
import Banner from "@/components/Banner.vue";
import Product from "@/components/Product.vue";
import QuickLink from "@/components/quickLink.vue";
import FocusAdvertising from "@/components/focusAdvertising.vue";
import ImagesCom from "@/components/Image.vue";
import TextCom from "@/components/Text.vue";
import narbar from "@/components/narbar.vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import Atmosphere from "@/components/Atmosphere.vue";

//首页商品推荐
const goodsListIndex = ref();
//装修页面json·
const jsonPage = ref();

const props = defineProps({
  jsonPage: {
    type: Object,
    default: () => {},
  },
});

watch(
  () => props.jsonPage,
  () => {
    jsonPage.value = props.jsonPage;
    initTitleView(jsonPage.value[0]);
    getGoodsListFn();
  }
);

const searchBk = ref("");
onBeforeMount(() => {
  jsonPage.value = props.jsonPage;
  initTitleView(jsonPage.value[0]);
  getGoodsListFn();
  searchBk.value = uni.getStorageSync("backgroundColor");
});

//初始化标题
function initTitleView(data: any) {
  // uni.setNavigationBarTitle({ title: data.title });
  // uni.setNavigationBarColor({
  //   backgroundColor: data.backgroundColor ? data.backgroundColor.toLowerCase() : "#ffffff",
  //   frontColor: data.color ? data.color.toLowerCase() : "#000000",
  // });

  uni.setStorageSync("navTitle", data);
  uni.setStorageSync("jsonPage", jsonPage.value);
}
// true：列表底部显示“上拉加载更多” false：显示“没有更多了”
const goodsShowNoMore = ref(false);
const page = ref(1);
//获取首页推荐商品
async function getGoodsListFn() {
  let par = {
    page: page.value,
    size: 10,
  };

  const { code, data } = await getGoodsListIndex({ ...par });
  triggered.value = false;
  if (code === 200) {
    if (page.value == 1) {
      goodsListIndex.value = [];
    }

    goodsListIndex.value.push(...data.list);

    if (data.list.length > 0) {
      goodsShowNoMore.value = false;
    } else {
      goodsShowNoMore.value = true;
    }
  }
}

function goSreach() {
  uni.navigateTo({
    url: "/pages/sreach/index",
  });
}

// 商品列表触底
function scrolltolower() {
  page.value++;
  getGoodsListFn();
}

const triggered = ref(false);
function onPulling() {
  triggered.value = true;
  page.value = 1;
  getGoodsListFn();
}
</script>

<style>
.content {
  height: 100vh;
  overflow: hidden;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

/* .page view {
  margin-bottom: 10rpx;
} */
</style>
